<template>
  <div>
    <!-- 知识点创编 -->
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="年级:" prop="region">
        <el-select v-model="ruleForm.region" placeholder="年级">
          <el-option label="一年级" value="一年级"></el-option>
          <el-option label="二年级" value="二年级"></el-option>
          <el-option label="三年级" value="三年级"></el-option>
          <el-option label="四年级" value="四年级"></el-option>
          <el-option label="五年级" value="五年级"></el-option>
          <el-option label="六年级" value="六年级"></el-option>
          <el-option label="初一" value="初一"></el-option>
          <el-option label="初二" value="初二"></el-option>
          <el-option label="初三" value="初三"></el-option>
          <el-option label="高一" value="高一"></el-option>
          <el-option label="高二" value="高二"></el-option>
          <el-option label="高三" value="高三"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="学科:" prop="regionn">
        <el-select
          v-model="ruleForm.regionn"
          placeholder="学科"
          @blur="blurexact()"
        >
          <el-option label="语文一年级" value="语文一年级"></el-option>
          <el-option label="数学一年级" value="数学一年级"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="知识点树：" prop="name">
        <div class="custom-tree-container">
          <div class="block">
            <el-tree
              :data="data"
              show-checkbox
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              class="bgc"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span >{{ node.label }}</span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => append(data)"
                  >
                    <el-button size="mini" class="btn hh">添加</el-button>
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => remove(node, data)"
                  >
                    <el-button size="mini" class="btn">删除</el-button>
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-form-item>

      <div class="btnn">
        <el-button type="success" size="small" @click="() => rootnode(data)"
          >添加根节点</el-button
        >
        <el-button size="small" @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
let id = 1000;
export default {
  data() {
    var data = [];
    return {
      data: JSON.parse(JSON.stringify(data)),
      ruleForm: {
        name: "",
        region: "",
        regionn: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [{ required: true, message: "请选择年级", trigger: "change" }],
        regionn: [{ required: true, message: "请选择学科", trigger: "change" }],
      },
    };
  },
  methods: {
    //学科失焦之后
    // blurexact() {

    // },
    //点击添加根节点
    rootnode(data) {
      this.$prompt("一级知识点名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then((value) => {
          data.push({
            label: value.value,
            children: [],
          });
          this.$message({
            type: "success",
            message: "添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //树状组件内部添加删除
    append(data) {
      const newChild = { id: id++, label: "", children: [] };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);

      this.$prompt("知识点名称", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then((value) => {
          console.log(value.value);
          newChild.label = value.value;
          this.$message({
            type: "success",
            message: "添加成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.ruleForm.region = this.$route.query.listdata[0];
    this.ruleForm.regionn = this.$route.query.listdata[1];
    if (
      this.ruleForm.region == "一年级" &&
      this.ruleForm.regionn == "语文一年级"
    ) {
      this.data.push(
        {
          id: 1,
          label: "拼音",
          children: [
            {
              id: 12,
              label: "韵母",
            },
            {
              id: 13,
              label: "声母",
            },
          ],
        },
        {
          id: 2,
          label: "作文",
        },
        {
          id: 3,
          label: "翻译",
          children: [
            {
              id: 31,
              label: "词汇",
            },
            {
              id: 32,
              label: "语法",
              children: [
                {
                  id: 5,
                  label: "入门语法",
                },
                {
                  id: 6,
                  label: "简单语法",
                },
              ],
            },
            {
              id: 33,
              label: "阅读能力",
              children: [
                {
                  id: 7,
                  label: "入门阅读",
                },
                {
                  id: 8,
                  label: "简单阅读",
                },
              ],
            },
          ],
        }
      );
    } else if (
      this.ruleForm.region == "二年级" &&
      this.ruleForm.regionn == "数学二年级"
    ) {
      this.data.push(
        {
          id: 1,
          label: "数的组成与比较",
          children: [
            {
              id: 12,
              label: "组成",
            },
            {
              id: 13,
              label: "比较",
            },
          ],
        },
        {
          id: 2,
          label: "加减乘除",
          children: [
            {
              id: 21,
              label: "加法",
            },
            {
              id: 22,
              label: "减法",
            },
            {
              id: 23,
              label: "乘法",
            },
            {
              id: 24,
              label: "除法",
            },
          ],
        }
      );
    } else {
      this.data = [];
    }
  },
};
</script>

<style scoped>
.btnn {
  margin-left: 80px;
}
span {
  color: rgb(178, 178, 178);
}
.custom-tree-node {
  flex: 1;
  align-items: center;
  font-size: 14px;
  padding-right: 200px;
}
.btn {
  width: 40px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bgc {
  background-color: #eff1f4;
}
/* 注意注意注意！！！！！！！ 下面的三个>>>是穿透语法，不是合并冲突，别给我删了！！！！！！ */
.custom-tree-container >>> .el-tree-node__content{
    height: 32px;
}
.hh{
  margin-left: 20px;
}
.kk{
  height: 100px;
}
</style>